<template>
  <Modal v-model="isOpen" title="新增职位" width="560px" :loading="loading" @on-ok="ok" @on-cancel="cancel">
    <Form ref="user" :model="user" :label-width="80">
      <FormItem label="姓名" prop="name">
        <Input type="text" v-model="user.name" />
      </FormItem>
      <FormItem label="手机号码" prop="phone">
        <Input type="text" v-model="user.phone" />
      </FormItem>
      <FormItem label="用户角色" prop="role_id">
        <RadioGroup v-model="user.role_id" v-for="(role,idx) in roleOpts" :key="idx">
          <Radio :label="role.value"><span v-text="role.text"></span></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="店铺" prop="sid">
        <Select v-model="user.sid" multiple filterable>
          <Option :value="sid.value" v-for="sid in sidOpts" :key="sid.value"><span v-text="sid.label"></span></Option>
        </Select>
      </FormItem>
      <FormItem label="职位类型" prop="work_id">
        <RadioGroup v-model="user.work_id" v-for="(work,idx) in workTypeOpts" :key="idx">
          <Radio :label="work.value"><span v-text="work.text"></span></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="工作年限" prop="work_time">
        <Input type="text" v-model="user.work_time" />
      </FormItem>
      <FormItem label="擅长领域" prop="skill">
        <Input type="text" v-model="user.skill" />
      </FormItem>
    </Form>
  </Modal>
</template>
<script>
  import list from '@/models/member/list'

  export default {
    name: 'add-work-type',
    data () {
      return {
        isOpen: true,
        loading: true,
        user: {
          name: '',
          phone: '',
          skill: '',
          role_id: '',
          work_id: '',
          sid: [],
          work_time: ''
        },
        roleOpts: [],
        workTypeOpts: [],
        sidOpts: []
      }
    },
    mounted () {
      list.getRoleOpts().then(r => {
        if (r.code === 200) {
          this.roles = r.ret
          if (this.roles.length > 0) {
            this.roles.forEach((role) => {
              this.roleOpts.push({
                value: role.id,
                text: role.name
              })
            })
          }
        } else {
          this.$Message.warning({
            content: r.msg,
            duration: 5,
            closable: true
          })
        }
      }).catch(r => {
        console.log(r)
      })
      list.getStoreOpts().then(r => {
        if (r.code === 200) {
          this.stores = r.ret
          if (this.stores.length > 0) {
            this.stores.forEach((store) => {
              this.sidOpts.push({
                value: store.id,
                label: store.name
              })
            })
          }
        } else {
          this.$Message.warning({
            content: r.msg,
            duration: 5,
            closable: true
          })
        }
      }).catch(r => {
        console.log(r)
      })
      list.getWorkTypeOpts().then(r => {
        if (r.code === 200) {
          this.works = r.ret
          if (this.works.length > 0) {
            this.works.forEach((work) => {
              this.workTypeOpts.push({
                value: work.wid,
                text: work.name
              })
            })
          }
        } else {
          this.$Message.warning({
            content: r.msg,
            duration: 5,
            closable: true
          })
        }
      }).catch(r => {
        console.log(r)
      })
    },
    methods: {
      ok () {
        list.add(this.user).then(r => {
          if (r.code === 200) {
            this.$emit('on-ok', {
              refresh: true
            })
            this.isOpen = !this.isOpen
            this.$Message.success({
              content: r.msg,
              duration: 5,
              closable: true
            })
          } else {
            this.loading = false
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          this.loading = false
          this.$Message.error({
            content: r.msg,
            duration: 5,
            closable: true
          })
        })
      },
      cancel () {
        this.$emit('on-cancel', {
          refresh: false
        })
      }
    }
  }
</script>
